
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>音乐播放器</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
	<style>
		body {
			background-color: #f0f0f0;
			font-family: Arial, Helvetica, sans-serif;
			text-align: center;
		}
		.container {
			background-color: #fff;
			max-width: 500px;
			margin: 50px auto;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
			padding: 20px;
		}
		h1 {
			font-size: 36px;
			margin-top: 0;
		}
		audio {
			width: 100%;
			outline: none;
			margin-top: 20px;
			margin-bottom: 10px;
		}
		.controls {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		.controls button {
			background-color: #2196F3;
			color: #fff;
			border: none;
			padding: 10px 20px;
			border-radius: 5px;
			margin: 5px;
			cursor: pointer;
			font-size: 20px;
			transition: background-color 0.2s;
		}
		.controls button:hover {
			background-color: #0d8bf2;
		}
		.progress {
			background-color: #ccc;
			height: 10px;
			position: relative;
			margin-top: 20px;
			margin-bottom: 10px;
			cursor: pointer;
		}
		.progress-bar {
			background-color: #2196F3;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			transition: width 0.2s;
		}
		.progress:hover .progress-bar {
			background-color: #0d8bf2;
		}
		.progress span {
			display: block;
			position: absolute;
			top: -20px;
			font-size: 14px;
			color: #777;
		}
		.volume {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20px;
			margin-bottom: 10px;
		}
		.volume-bar {
			background-color: #ccc;
			height: 10px;
			flex-grow: 1;
			margin: 0 10px;
			position: relative;
		}
		.volume-bar span {
			display: block;
			position: absolute;
			top: -20px;
			font-size: 14px;
			color: #777;
		}
		.volume-bar button {
			display: block;
			background-color: transparent;
			color: #777;
			border: none;
			font-size: 20px;
			padding: 0;
			margin: 0;
			cursor: pointer;
			transition: color 0.2s;
		}
		.volume-bar button:hover {
			color: #2196F3;
		}
		.search-form {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin: 20px 0;
		}
		.search-form input[type="text"] {
			border: none;
			padding: 10px;
			flex-grow: 1;
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			font-size: 18px;
		}
		.search-form input[type="submit"] {
			background-color: #2196F3;
			color: #fff;
			border: none;
			padding: 10px 20px;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			font-size: 18px;
			cursor: pointer;
			transition: background-color 0.2s;
		}
		.search-form input[type="submit"]:hover {
			background-color: #0d8bf2;
		}
		.results {
			margin-top: 20px;
		}
		.results table {
			width: 100%;
			border-collapse: collapse;
		}
		.results table th,
		.results table td {
			padding: 10px;
			text-align: left;
			border-bottom: 1px solid #ccc;
		}
		.results table th {
			background-color: #eee;
			text-transform: uppercase;
			font-size: 14px;
			color: #777;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>音乐播放器</h1>
		<audio src="" id="audio"></audio>
		<div class="controls">
			<button id="play" onclick="play();"><i class="fa fa-play"></i></button>
			<button id="pause" onclick="pause();"><i class="fa fa-pause"></i></button>
			<button id="stop" onclick="stop();"><i class="fa fa-stop"></i></button>
			<button id="prev" onclick="prev();"><i class="fa fa-step-backward"></i></button>
			<button id="next" onclick="next();"><i class="fa fa-step-forward"></i></button>
			<button id="random" onclick="random();"><i class="fa fa-random"></i></button>
			<button id="repeat" onclick="repeat();"><i class="fa fa-repeat"></i></button>
		</div>
		<div class="progress" onclick="setProgress(event)">
			<span id="currentTime">00:00</span>
			<span id="duration">00:00</span>
			<div class="progress-bar" id="progressBar"></div>
		</div>
		<div class="volume">
			<button onclick="setMute();"><i class="fa fa-volume-up"></i></button>
			<div class="volume-bar" onclick="setVolume(event)">
				<span>音量</span>
				<div class="progress-bar" id="volumeBar"></div>
			</div>
			<button onclick="setFullScreen();"><i class="fa fa-arrows-alt"></i></button>
		</div>
		<form class="search-form" onsubmit="loadResults(); return false;">
			<input type="text" id="searchQuery" placeholder="搜索音乐...">
			<input type="submit" value="搜索">
		</form>
		<div class="results">
			<table id="resultsTable"></table>
		</div>
	</div>

	<script>
		var audio = document.getElementById("audio");
		var playBtn = document.getElementById("play");
		var pauseBtn = document.getElementById("pause");
		var stopBtn = document.getElementById("stop");
		var prevBtn = document.getElementById("prev");
		var nextBtn = document.getElementById("next");
		var randomBtn = document.getElementById("random");
		var repeatBtn = document.getElementById("repeat");
		var progressBar = document.getElementById("progressBar");
		var volumeBar = document.getElementById("volumeBar");
		var currentTime = document.getElementById("currentTime");
		var duration = document.getElementById("duration");
		var searchQuery = document.getElementById("searchQuery");
		var resultsTable = document.getElementById("resultsTable");
		var volumeBeforeMute;

		audio.addEventListener("loadedmetadata", function() {
			duration.innerHTML = formatTime(audio.duration);
		});

		audio.addEventListener("timeupdate", function() {
			currentTime.innerHTML = formatTime(audio.currentTime);
			var progress = audio.currentTime / audio.duration * 100;
			progressBar.style.width = progress + "%";
		});

		function play() {
			audio.play();
			playBtn.style.display = "none";
			pauseBtn.style.display = "inline-block";
		}

		function pause() {
			audio.pause();
			playBtn.style.display = "inline-block";
			pauseBtn.style.display = "none";
		}

		function stop() {
			audio.pause();
			audio.currentTime = 0;
			playBtn.style.display = "inline-block";
			pauseBtn.style.display = "none";
			progressBar.style.width = "0%";
			currentTime.innerHTML = formatTime(0);
		}

		function prev() {
			// TODO: Implement previous track function
		}

		function next() {
			// TODO: Implement next track function
		}

		function random() {
			// TODO: Implement shuffle playlist function
		}

		function repeat() {
			// TODO: Implement repeat track/playlist function
		}

		function setProgress(event) {
			var duration = audio.duration;
			var offsetX = event.offsetX;
			var width = progressBar.offsetWidth;
			var progress = offsetX / width;
			var currentTime = duration * progress;
			audio.currentTime = currentTime;
			progressBar.style.width = progress * 100 + "%";
		}

		function setMute() {
			if (audio.volume > 0) {
				volumeBeforeMute = audio.volume;
				audio.volume = 0;
				document.querySelector(".fa-volume-up").className = "fa fa-volume-off";
			} else {
				audio.volume = volumeBeforeMute;
				document.querySelector(".fa-volume-off").className = "fa fa-volume-up";
			}
		}

		function setVolume(event) {
			var volume = event.offsetX / volumeBar.offsetWidth;
			audio.volume = volume;
			volumeBar.querySelector(".progress-bar").style.width = volume * 100 + "%";
		}

		function setFullScreen() {
			// TODO: Implement full screen mode function
		}

		function loadResults() {
			var query = searchQuery.value;
			fetch("https://tool.liumingye.cn/music/search.php?keyword=" + query)
				.then(response => response.json())
				.then(data => {
					var resultsHtml = "";
					if (data.length > 0) {
						resultsHtml += "<tr><th>歌曲</th><th>歌手</th><th>时长</th><th></th></tr>";
						for (var i = 0; i < data.length; i++) {
							var songName = data[i].title;
							var artist = data[i].singer;
							var duration = formatTime(data[i].duration / 1000);
							var url = data[i].url;
							if (url.indexOf("http") === -1) {
								url = "https://tool.liumingye.cn/music/" + url;
							}
							resultsHtml += "<tr><td>" + songName + "</td><td>" + artist + "</td><td>" + duration +
								"</td><td><button onclick='playSong(\"" + url + "\", \"" + songName + " - " + artist +
								"\")'><i class='fa fa-play'></i></button></td></tr>";
						}
					} else {
						resultsHtml += "<tr><td colspan='4'>没有找到相应的结果</td></tr>";
					}
					resultsTable.innerHTML = resultsHtml;
				})
				.catch(error => {
					resultsTable.innerHTML = "<tr><td colspan='4'>加载结果时发生错误</td></tr>";
				});
		}

		function playSong(url, name) {
			audio.src = url;
			play();
			document.title = name + " - 音乐播放器";
		}

		function formatTime(time) {
			var minutes = Math.floor(time / 60);
			var seconds = Math.floor(time % 60);
			if (seconds < 10) {
				seconds = "0" + seconds;
			}
			return minutes + ":" + seconds;
		}
	</script>
</body>
</html>
